<template>
    <div class="view-switcher">
        <div class="left-section">
            <div class="view-buttons">
                <button 
                    class="view-btn" 
                    :class="{ active: currentView === 'grid' }"
                    @click="switchView('grid')"
                >
                    <svg-icon name="house/info/icon-1" />
                </button>
                <button 
                    class="view-btn" 
                    :class="{ active: currentView === 'list' }"
                    @click="switchView('list')"
                >
                    <svg-icon name="house/info/icon-2" />
                </button>
            </div>
            <div class="category-dropdown">
                <div class="dropdown-trigger" @click="showDropdown = !showDropdown">
                    {{ currentCategoryText }}
                    <div class="arrow" :class="{ open: showDropdown }"></div>
                </div>
                <div class="dropdown-menu" v-show="showDropdown" @mouseleave="showDropdown = false">
                    <router-link 
                        to="/house" 
                        class="dropdown-item"
                        :class="{ active: route.path === '/house' }"
                        @click="handleCategoryChange('all')"
                    >
                        所有房产
                    </router-link>
                    <router-link 
                        to="/house/hot" 
                        class="dropdown-item"
                        :class="{ active: route.path === '/house/hot' }"
                        @click="handleCategoryChange('hot')"
                    >
                        热门房产
                    </router-link>
                    <router-link 
                        to="/house/new" 
                        class="dropdown-item"
                        :class="{ active: route.path === '/house/new' }"
                        @click="handleCategoryChange('new')"
                    >
                        最新房产
                    </router-link>
                </div>
            </div>
        </div>
        <div class="right-section">
            <button class="filter-btn" @click="$emit('showFilter')">
                <span>筛选</span>
                <svg-icon name="house/filter" />
            </button>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'

const currentView = ref('grid')
const route = useRoute()
const showDropdown = ref(false)

const currentCategoryText = computed(() => {
    switch (route.path) {
        case '/house/hot':
            return '热门房产'
        case '/house/new':
            return '最新房产'
        default:
            return '所有房产'
    }
})

const emit = defineEmits(['viewChange', 'categoryChange', 'showFilter'])

const switchView = (view) => {
    currentView.value = view
    emit('viewChange', view)
}

const handleCategoryChange = (category) => {
    showDropdown.value = false
    emit('categoryChange', category)
}
</script>

<style lang="scss" scoped>
.view-switcher {
    max-width: 1320px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .left-section {
        display: flex;
        align-items: center;
        gap: 24px;
        
        .view-buttons {
            display: flex;
            gap: 8px;
            
            .view-btn {
                width: 40px;
                height: 40px;
                border: 1px solid #EDEFF6;
                border-radius: 4px;
                background: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.3s;
                
                .svg-icon {
                    width: 24px;
                    height: 24px;
                    color: #6D737A;
                }
                
                &.active {
                    background: #4A60A1;
                    border-color: #4A60A1;
                    
                    .svg-icon {
                        color: #fff;
                    }
                }
                
                &:hover:not(.active) {
                    border-color: #4A60A1;
                    
                    .svg-icon {
                        color: #4A60A1;
                    }
                }
            }
        }
        
        .category-dropdown {
            position: relative;
            
            .dropdown-trigger {
                height: 40px;
                padding: 0 16px;
                border: 1px solid #EDEFF6;
                border-radius: 4px;
                background: #fff;
                color: #2F3B59;
                font-size: 15px;
                display: flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;
                min-width: 160px;
                
                .arrow {
                    width: 0;
                    height: 0;
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                    border-top: 5px solid #4A60A1;
                    transition: transform 0.3s;
                    margin-left: 80px;
                    
                    &.open {
                        transform: rotate(180deg);
                    }
                }
            }
            
            .dropdown-menu {
                position: absolute;
                top: calc(100% + 8px);
                left: 0;
                width: 100%;
                background: #fff;
                border-radius: 4px;
                box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
                z-index: 10;
                
                .dropdown-item {
                    display: block;
                    padding: 8px 16px;
                    color: #2F3B59;
                    text-decoration: none;
                    transition: all 0.3s;
                    font-size: 14px;
                    
                    &:hover {
                        background: #F5F6FA;
                        color: #4A60A1;
                    }
                    
                    &.active {
                        color: #4A60A1;
                        background: #F5F6FA;
                    }
                }
            }
        }
    }
    
    .right-section {
        .filter-btn {
            height: 40px;
            padding: 0 20px;
            border: 1px solid #EDEFF6;
            border-radius: 4px;
            background: #fff;
            color: #2F3B59;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.3s;
            
            .svg-icon {
                width: 16px;
                height: 16px;
            }
            
            &:hover {
                border-color: #4A60A1;
                color: #4A60A1;
                
                .svg-icon {
                    color: #4A60A1;
                }
            }
        }
    }
}
</style> 